<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./lib/vue.js"></script>
		<script src="./lib/vue-router.js"></script>
		<link rel="stylesheet" href="./lib/bootstrap.css" />
		<style>
			/* 默认的类名 */
			.router-link-active,.myactive{
				color: red;
				font-weight: 800;
				font-style: initial;
				font-size: 50px;
				text-decoration: underline;
				background-color: green;
			}
			.v-enter,.v-leave-to{
				opacity: 0;
				transform: translateX(200px);
			}
			.v-enter-active,.v-leave-active{
				transition: all 1s ease;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <a href="#/login">登录</a>
			<a href="#/register">注册</a> -->
			<router-link to="/login" tag="span">登录</router-link>
			<router-link to="/register">注册</router-link>
			<!-- 这是vue-router提供的元素，专门提供当前占位符的，将来路由规则，匹配到的组件，将会展示到这个router-view中去 -->
			<!-- 所以：我们可以把router-view认为是一个占位符 -->
			<transition mode="out-in">
				<router-view></router-view>
			</transition>
		</div>
		<script>
			var login={
				template:'<h1>登录组件</h1>'
			}
			var register={
				template:'<h1>注册组件</h1>'
			}
			var routerObj =new VueRouter({
				//routes 路由配置规制
				routes:[
					//每个路由规则，都是一个规则对象，身上两个必须的属性
					//属性1是path，表示监听，哪个路由链接地址
					// 属性2是component，表示如果路由是前面的配置的path，则展示component属性对应的那个组件
					// {path:'/',component:login},
					{path:'/',redirect:'/login'},
					{path:'/login',component:login},
					{path:'/register',component:register}
				],
				linkActiveClass:'myactive'  //这里是可以该类名的
			})
			
			var vm = new Vue({
				el: '#app',
				data: {
				},
				methods: {
				},
				router: routerObj //将路由规则对象，注册到vm实例上，用来监听URL地址的变化，然后展示对应的组件
			})
		</script>
	</body>
</html>
